<script setup lang="ts">
defineOptions({
  name: "weatherItem"
});
import { markRaw } from "vue";
import wetBall from "@/assets/svg/machine/wetBall.svg?component";
import dryBall from "@/assets/svg/machine/dryBall.svg?component";
import hanZhi from "@/assets/svg/machine/hanZhi.svg?component";
import newPoint from "@/assets/svg/machine/newPoint.svg?component";
import absoluteHumidity from "@/assets/svg/machine/absoluteHumidity.svg?component";

const iconComList = {
  dryBall: markRaw(dryBall),
  wetBall: markRaw(wetBall),
  hanZhi: markRaw(hanZhi),
  absoluteHumidity: markRaw(absoluteHumidity),
  newPoint: markRaw(newPoint)
};

interface Props {
  /**  数据列表 */
  dataList?: any;
}

const props = withDefaults(defineProps<Props>(), {
  dataList: {}
});
</script>

<template>
  <div class="energy-desk-content">
    <div class="energy-desk-content-list">
      <div :class="{ 'content-item': true }">
        <component :is="iconComList.dryBall" class="content-icon" />
        <div class="content-box">
          <div class="content-box-label">室外干球温度</div>
          <div class="content-box-data">
            <span class="data-text">{{ dataList && dataList.tempDry }}</span
            ><span class="data-unit">&nbsp;℃</span>
          </div>
          <div class="content-box-data">
            <span class="data-alt">环比：</span>
            <span :style="{ color: dataList && dataList.tempDry >= 0 ? '#EF7577' : '#10B981' }">{{
              dataList && dataList.tempDry > 0 ? "+" : dataList && dataList.tempDry < 0 ? "-" : ""
            }}</span>
            <span :style="{ color: dataList && dataList.tempDry >= 0 ? '#EF7577' : '#10B981' }">{{ dataList && dataList.tempDryAlt }}</span>
            <span v-if="dataList && dataList.tempDry" :style="{ color: dataList && dataList.tempDry >= 0 ? '#EF7577' : '#10B981' }">{{ "%" }}</span>
            <px-icon
              v-if="dataList && dataList.tempDry !== null && dataList && dataList.tempDry !== undefined"
              :color="dataList && dataList.tempDry >= 0 ? '#EF7577' : '#10B981'"
              ><Top v-if="dataList && dataList.tempDry >= 0" /><Bottom v-if="dataList && dataList.tempDry < 0"
            /></px-icon>
          </div>
        </div>
      </div>
      <div :class="{ 'content-item': true }">
        <component :is="iconComList.wetBall" class="content-icon" />
        <div class="content-box">
          <div class="content-box-label">室外湿球温度</div>
          <div class="content-box-data">
            <span class="data-text">{{ dataList && dataList.tempWet }}</span
            ><span class="data-unit">&nbsp;℃</span>
          </div>
          <div class="content-box-data">
            <span class="data-alt">环比：</span>
            <span :style="{ color: dataList && dataList.tempWet >= 0 ? '#EF7577' : '#10B981' }">{{
              dataList && dataList.tempWet > 0 ? "+" : dataList && dataList.tempWet < 0 ? "-" : ""
            }}</span>
            <span :style="{ color: dataList && dataList.tempWet >= 0 ? '#EF7577' : '#10B981' }">{{ dataList && dataList.tempWetAlt }}</span>
            <span v-if="dataList && dataList.tempWet" :style="{ color: dataList && dataList.tempWet >= 0 ? '#EF7577' : '#10B981' }">{{ "%" }}</span>
            <px-icon
              v-if="dataList && dataList.tempWet !== null && dataList && dataList.tempWet !== undefined"
              :color="dataList && dataList.tempWet >= 0 ? '#EF7577' : '#10B981'"
              ><Top v-if="dataList && dataList.tempWet >= 0" /><Bottom v-if="dataList && dataList.tempWet < 0"
            /></px-icon>
          </div>
        </div>
      </div>
      <div :class="{ 'content-item': true }">
        <component :is="iconComList.hanZhi" class="content-icon" />
        <div class="content-box">
          <div class="content-box-label">焓值</div>
          <div class="content-box-data">
            <span class="data-text">{{ dataList && dataList.enthalpy }}</span
            ><span class="data-unit">&nbsp;kj/kg</span>
          </div>
          <div class="content-box-data">
            <span class="data-alt">环比：</span>
            <span :style="{ color: dataList && dataList.enthalpy >= 0 ? '#EF7577' : '#10B981' }">{{
              dataList && dataList.enthalpy > 0 ? "+" : dataList && dataList.enthalpy < 0 ? "-" : ""
            }}</span>
            <span :style="{ color: dataList && dataList.enthalpy >= 0 ? '#EF7577' : '#10B981' }">{{ dataList && dataList.enthalpyAlt }}</span>
            <span v-if="dataList && dataList.enthalpy" :style="{ color: dataList && dataList.enthalpy >= 0 ? '#EF7577' : '#10B981' }">{{ "%" }}</span>
            <px-icon
              v-if="dataList && dataList.enthalpy !== null && dataList && dataList.enthalpy !== undefined"
              :color="dataList && dataList.enthalpy >= 0 ? '#EF7577' : '#10B981'"
              ><Top v-if="dataList && dataList.enthalpy >= 0" /><Bottom v-if="dataList && dataList.enthalpy < 0"
            /></px-icon>
          </div>
        </div>
      </div>
      <div :class="{ 'content-item': true }">
        <component :is="iconComList.absoluteHumidity" class="content-icon" />
        <div class="content-box">
          <div class="content-box-label">绝对湿度</div>
          <div class="content-box-data">
            <span class="data-text">{{ dataList && dataList.humility }}</span
            ><span class="data-unit">&nbsp;g/Kg</span>
          </div>
          <div class="content-box-data">
            <span class="data-alt">环比：</span>
            <span :style="{ color: dataList && dataList.humility >= 0 ? '#EF7577' : '#10B981' }">{{
              dataList && dataList.humility > 0 ? "+" : dataList && dataList.humility < 0 ? "-" : ""
            }}</span>
            <span :style="{ color: dataList && dataList.humility >= 0 ? '#EF7577' : '#10B981' }">{{ dataList && dataList.humilityAlt }}</span>
            <span v-if="dataList && dataList.humility" :style="{ color: dataList && dataList.humility >= 0 ? '#EF7577' : '#10B981' }">{{ "%" }}</span>
            <px-icon
              v-if="dataList && dataList.humility !== null && dataList && dataList.humility !== undefined"
              :color="dataList && dataList.humility >= 0 ? '#EF7577' : '#10B981'"
              ><Top v-if="dataList && dataList.humility >= 0" /><Bottom v-if="dataList && dataList.humility < 0"
            /></px-icon>
          </div>
        </div>
      </div>
      <div :class="{ 'content-item': true }">
        <component :is="iconComList.newPoint" class="content-icon" />
        <div class="content-box">
          <div class="content-box-label">露点</div>
          <div class="content-box-data">
            <span class="data-text">{{ dataList && dataList.tempDew }}</span
            ><span class="data-unit">&nbsp;℃</span>
          </div>
          <div class="content-box-data">
            <span class="data-alt">环比：</span>
            <span :style="{ color: dataList && dataList.tempDew >= 0 ? '#EF7577' : '#10B981' }">{{
              dataList && dataList.tempDew > 0 ? "+" : dataList && dataList.tempDew < 0 ? "-" : ""
            }}</span>
            <span :style="{ color: dataList && dataList.tempDew >= 0 ? '#EF7577' : '#10B981' }">{{ dataList && dataList.tempDewAlt }}</span>
            <span v-if="dataList && dataList.tempDew" :style="{ color: dataList && dataList.tempDew >= 0 ? '#EF7577' : '#10B981' }">{{ "%" }}</span>
            <px-icon
              v-if="dataList && dataList.tempDew !== null && dataList && dataList.tempDew !== undefined"
              :color="dataList && dataList.tempDew >= 0 ? '#EF7577' : '#10B981'"
              ><Top v-if="dataList && dataList.tempDew >= 0" /><Bottom v-if="dataList && dataList.tempDew < 0"
            /></px-icon>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$colorDone: #00b36d;
$colorTotal: var(--px-color-primary);

.energy-desk-content {
  width: 100%;

  .energy-desk-content-list {
    display: flex;
    flex-flow: row nowrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
    padding-left: 16px;
    border-left: 1px solid #dcdcdc;

    .content-item {
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: flex-start;
      min-width: 150px;
      height: 100%;
      margin-right: auto;

      .content-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 30px;
      }
    }

    .color-done {
      color: $colorDone;
    }

    .data-text {
      font-size: 24px;
      line-height: 1;
      white-space: nowrap;
    }

    .data-unit {
      font-size: 14px;
    }

    .data-alt {
      font-size: 12px;
      font-weight: 400;
      line-height: 12px;
      color: #909399;
      white-space: nowrap;
    }

    .content-box {
      display: flex;
      flex-direction: column;
      gap: 6px;

      .content-box-label {
        font-size: 14px;
        font-weight: 400;
        line-height: 1;
        color: #555;
        white-space: nowrap;
      }

      .content-box-data {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
